<template>
  <div>
    <slot></slot>
    <div ref="loadingTarget" class="h-6 py-4">
      <!-- 加载更多 -->
      <x-svg-icon
        v-show="loading"
        class="w-4 h-4 mx-auto animate-spin"
        name="infinite-load"
      ></x-svg-icon>
      <!-- 没有更多 -->
      <p v-if="isFinished" class="text-center text-base text-zinc-400">没了</p>
    </div>
  </div>
</template>
<script setup>
import { useIntersectionObserver, useVModel } from "@vueuse/core";
import { ref, watch } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  //   数据是否全部加载完毕
  isFinished: {
    type: Boolean,
    default: false,
  },
});
const loading = useVModel(props);

const emits = defineEmits(["onLoad", "update:modelValue"]);
// 滚动的元素 最底部的
const loadingTarget = ref(null);
const targetIsIntersecting = ref(false);
//useIntersectionObserver 监听元素是否可见
useIntersectionObserver(loadingTarget, ([{ isIntersecting }]) => {
  // isIntersecting是否可见
  targetIsIntersecting.value = isIntersecting;
  emitLoading();
});
const emitLoading = () => {
  setInterval(() => {
    //   当滚动元素可见,loading为false 数据尚未加载完毕
    //   正在加载数据...
    if (targetIsIntersecting.value && !loading.value && !props.isFinished) {
      loading.value = true;
      emits("onLoad");
    }
  }, 100);
};
watch(loading, () => {
  emitLoading();
});
</script>

<style lang="scss" scoped>
</style>